<template>
    <div class="CommonModal_Box">
        <a-modal
            v-if="props.isFooter"
            v-model:visible="visible"
            :title="title"
            :width="width"
            :closable="closable"
            :wrapClassName="'CommonModal '+wrapClassName"
            @ok="handleOk"
            @cancel="handleCancel"
            :maskClosable="false"
            destroyOnClose
            style="top: 42px"
        >
            <slot></slot>
            <template #footer>
                <div class="Modal_Footer">
                    <a-button v-show="isCancelText" key="back" @click="handleCancel">{{cancelText}}</a-button>
                    <a-button
                        v-show="isOkText"
                        class="submit_btn"
                        key="submit"
                        :danger="danger"
                        type="primary"
                        :loading="state.submitLoading"
                        @click="handleOk"
                    >
                        {{ okText }}
                    </a-button>
                </div>
            </template>
        </a-modal>
        <a-modal
            v-else
            v-model:visible="visible"
            :title="title"
            :width="width"
            :closable="closable"
            :wrapClassName="'CommonModal '+wrapClassName"
            @ok="handleOk"
            @cancel="handleCancel"
            destroyOnClose
            :maskClosable="false"
            class="batteryCompartmentDetail-modal"
            :footer="null"
            style="top: 42px"
        >
            <slot></slot>
        </a-modal>
    </div>
</template>
<script setup>
import {reactive, ref, watch} from 'vue';
const props = defineProps({
    wrapClassName:{
        default: '',
        type: String
    },
    // 是否展示关闭按钮
    closable: {
        default: false,
        type: Boolean
    },
    // 是否展示弹框
    modelValue: {
        default: false,
        type: Boolean
    },
    // 弹框标题
    title: {
        default: '提示',
        type: String
    },
    // 确认按钮类型
    danger: {
        default: false,
        type: Boolean
    },
    // 确认按钮类型
    isFooter: {
        default: true,
        type: Boolean
    },
    // 取消按钮文字
    cancelText: {
        default: '取消',
        type: String
    },
    // 取消按钮文字 是否展示
    isCancelText: {
        default: true,
        type: Boolean
    },
    // 确定按钮文字
    okText: {
        default: '确定',
        type: String
    },
    // 确定按钮文字 是否展示
    isOkText: {
        default: true,
        type: Boolean
    },
    // 弹框宽度
    width: {
        default: 440,
        type: Number
    }
})
const emit = defineEmits(['handleOk','handleCancel','update:modelValue'])
const state = reactive({
    submitLoading: false
})
const visible = ref(false);
const handleOk = e => {
    // 重要！！关闭后清理给body加的style
    // if (document.getElementsByTagName('body')[0].hasAttribute('style')) {
    //   document.getElementsByTagName('body')[0].removeAttribute('style');
    // }
    emit('handleOk')
    state.submitLoading = false
};
const handleCancel = e => {
    emit('handleCancel')
    emit('update:modelValue', false)
    state.submitLoading = false
};
watch(props, (val)=>{
    visible.value = val.modelValue
    if(!val.modelValue) {
        state.submitLoading = false
    }
})
</script>
<style scoped lang="less">
.Modal_Footer{
    text-align: center;
    button{
        width: 100px;
        height: 32px;
        border-radius: 6px;
        border: 1px solid #E0E0E0;
    }
    .submit_btn{
        border: none;
    }
}
</style>
